<template>
    <div class="attemdamce-form">
      <div class="attemdamce-form-f">
        <a-form
            :model="formState"
            name="basic"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >
            <a-form-item
            label="早班-上班打卡时间"
            name="earlyStartTime"
            :rules="[{ required: true, message: '请选择早班-上班打卡时间' }]"
            >
            <a-time-picker class="form-item" v-model:value="formState.earlyStartTime" format="HH:mm"  />
            </a-form-item>

            <a-form-item
            label="早班-下班打卡时间"
            name="earlyEndTime"
            :rules="[{ required: true, message: '请选择早班-下班打卡时间' }]"
            >
            <a-time-picker  class="form-item" v-model:value="formState.earlyEndTime" format="HH:mm"  />
            </a-form-item>

            <a-form-item
            label="晚班-上班打卡时间"
            name="lateStartTime"
            :rules="[{ required: true, message: '请选择晚班-上班打卡时间' }]"
            >
            <a-time-picker  class="form-item" v-model:value="formState.lateStartTime" format="HH:mm"  />
            </a-form-item>
            <a-form-item
            label="晚班-下班打卡时间"
            name="lateEndTime"
            :rules="[{ required: true, message: '请选择晚班-下班打卡时间' }]"
            >
            <a-time-picker  class="form-item" v-model:value="formState.lateEndTime" format="HH:mm"  />
            </a-form-item>
            <a-form-item
            label="会议打卡前（分钟）"
            name="meetingStartTime"
            :rules="[{ required: true, message: '请选择会议打卡前（分钟）' }]"
            >
            <a-input-number  class="form-item" v-model:value="formState.meetingStartTime" min="1" />
            </a-form-item>
            <!-- <a-form-item
            label="会议后打卡时间"
            name="meetingEndTime"
            :rules="[{ required: true, message: '请选择会议后打卡时间' }]"
            >
            <a-time-picker  class="form-item" v-model:value="formState.meetingEndTime" value-format="HH:mm:ss" />
            </a-form-item> -->

            <a-form-item :wrapper-col="{ span: 14, offset: 4 }" style="text-align: left;">
            <a-button type="primary" html-type="submit">保存</a-button>
            </a-form-item>
        </a-form>
      </div>
    </div>
</template>
<script  lang="ts" setup>
import { onMounted, reactive } from 'vue';
import {list,saveOrUpdate} from './GbiacAttendance.api';
import dayjs from 'dayjs'
interface FormState {
  earlyStartTime: string;
  earlyEndTime: string;
  lateStartTime: string;
  lateEndTime:string;
  meetingStartTime:string;
  meetingEndTime:string;
}
let isUpdate:boolean = false;
let id:string = '';
const formState = reactive<FormState>({
  earlyStartTime: '',
  earlyEndTime: '',
  lateStartTime: '',
  lateEndTime:'',
  meetingStartTime:'',
  meetingEndTime:''
});
onMounted(()=>{
  getList()
})
 async function onFinish (values: any)  {
  console.log('Success:', values);
  try {
    let value:any = values
    if(isUpdate){
      value.id = id;
    }
    await saveOrUpdate(value,isUpdate);
    getList()
  } catch (error) {
    
  }
  
};
const getList=()=>{
  list({
    pageNo:1,
    pageSize:10
  }).then(res=>{
    if(res.records && res.records.length){
      console.log("isUpdate",true);
      
      isUpdate = true;
      formState.earlyStartTime = dayjs(res.records[0].earlyStartTime,'HH:mm')
      formState.earlyEndTime = dayjs(res.records[0].earlyEndTime,'HH:mm')
      formState.lateStartTime = dayjs(res.records[0].lateStartTime,'HH:mm')
      formState.lateEndTime = dayjs(res.records[0].lateEndTime,'HH:mm')
      formState.meetingStartTime = res.records[0].meetingStartTime
      formState.meetingEndTime = res.records[0].meetingEndTime
      id =  res.records[0].id
    }else{
      isUpdate = false;
    }
    console.log(res);
    
  })
}
const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
</script>

<style lang="less" scoped>
[data-theme="dark"] .attemdamce-form{
    background-color: #151515;
}
  .attemdamce-form{
    background-color: #ffffff;
    padding: 20px;
    width: 100%;
    height: 100%;
    &-f{
    }
    .form-item{
      width: 300px;
    }
  }
  :deep(.ant-picker),:deep(.ant-input-number){
    width: 100%;
  }
</style>